<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
	var buttonTemp;
	var pageTemp;
	var maxResult;
	var pageTemp;
	var maxPage = 10;
	var pagedPage=false;
	$(document).ready(function() {
			goToPage(1,null);
			});

	//Max Page = 10
	function goToPage(page, button) {
		pageTemp = page;
		var first;
		if(page !=null){
			first = (page - 1) * maxPage;
		}else{
			first = (pageTemp - 1)* maxPage;
		}
		$.getJSON("<%=request.getContextPath()%>/service/file_storage/all/0/20", {}, function(data) {
			if(data.success){
			console.info("ngecek data");
			maxResult = data.resultSize;
			console.info(data);
			var arr = new Array();
			$("table.table tbody tr:not(#header)").fadeOut(1000,function(){
				$("table.table tbody tr:not(#header)").detach();
			if(data.data.length>0){
			$.each(data.data,function(index,value){
				if((index+1)%2==0){
				arr.push("<tr class='even'><td><input type='checkbox' name='id' value='"+value.id+"'/></td><td>"+value.file_name+"</td><td>"+value.codename+"</td><td>"+value.contentType+"</td><td>"+value.description+"</td><td><a href='<%=request.getContextPath()%>/service/file_storage/download/"+value.id+"'>download</a>|<a onclick='remove(this);return false;' id='delete' href='<%=request.getContextPath()%>/service/file_storage/delete/"+value.id+"'>delete</a>|<a href='<%=request.getContextPath()%>/admin/uploud/update/"+value.id+"'>update</a></td></tr>");
				}else{
				arr.push("<tr class='odd'> <td><input type='checkbox' name='id' value='"+value.id+"'/></td><td>"+value.file_name+"</td><td>"+value.codename+"</td><td>"+value.contentType+"</td><td>"+value.description+"</td><td><a href='<%=request.getContextPath()%>/service/file_storage/download/"+value.id+"'>download</a>|<a onclick='remove(this);return false;' id='delete' href='<%=request.getContextPath()%>/service/file_storage/delete/"+value.id+"'>delete</a>|<a href='<%=request.getContextPath()%>/admin/uploud/update/"+value.id+"'>update</a></td></tr>");
				}
			});
			}else{
				arr.push("<tr><td colspan='6'>Result = 0</td></tr>");
			}
			$("table.table tbody tr#header").after($(arr.join()));
			$("table.table tbody tr:not(#header)").fadeIn();
			if(!pagedPage){
				showPaginationNum(maxResult);
			}
			});
			}else{
				showErrorMessage(data.error);
			}
		});
	};
	
	function showPaginationNum(resultNumber){
		if(resultNumber >0){
			var pageNumbering="";
			var page = resultNumber / maxPage;
			page = Math.floor(page);
			if((resultNumber % maxPage)>0){
				page+=1;
			}
			
			for(i=1;i<=page;i++){
				pageNumbering+="<a href='#'>1</a>";
			}
			
			$(".pagination").append(pageNumbering);
			pagedPage=true;
			
			$(".pagination a").click(
					function() {
						console.info($(this));
						if (buttonTemp != null) {
							buttonTemp.replaceWith("<a href=#>"
									+ buttonTemp.text() + "</a>");
						}
						buttonTemp = $("<span class='current'>"
								+ $(this).text() + "</span>");
						$(this).replaceWith(buttonTemp);
						goToPage($(this).text(),this);
					});
		}
	}
	function remove(el){
		$.getJSON(el.href,{},function(data){
			if(data.success){
				showNoticeMessage("Data Successful Deleted");
				goToPage();
			}else{
				showErrorMessage(data.error);
			}
		});
		return false;
	}
</script>
<title>File Upload</title>
</head>
<body>
	<div class="secondary-navigation">
		<ul class="wat-cf">
			<li class="first"><a href="/admin/upload">Upload</a></li>
			<li class="active"><a href="/admin/upload/list">List</a></li>
		</ul>
	</div>
	<div class="flash">
	
	</div>
	<div class="block" id="block-form">
		<div class="content">
			<h2 class="title">List File Storage</h2>
			<div class="inner">
				<table class="table">
					<tr id="header">
						<th><input type="checkbox" /></th>
						<th>File Name</th>
						<th>Codename</th>
						<th>Content Type</th>
						<th>Description</th>
						<th>Command</th>
					</tr>
					<tr><td colspan="6">No Data Loaded</td></tr>
				</table>
				<div class="actions-bar wat-cf">
					<div class="actions">
						<button class="button" type="submit">
							<img src="/images/icons/cross.png" alt="Delete"> Delete
						</button>
					</div>
					<div class="pagination">
						
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>